<div data-dojo-type="dijit.MenuBar" id="navMenu">
  {% if user.is_authenticated %}

  <div id="menuBar_Account" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openAccount();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/account.png" />
    <br />
    <span>{% trans "Account" %}</span>
  </div>

  <div id="menuBar_System" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openSystem();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/system.png" />
    <br />
    <span>{% trans "System" %}</span>
  </div>

  <div id="menuBar_Tasks" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openTasks();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/tasks.png" />
    <br />
    <span>{% trans "Tasks" %}</span>
  </div>

  <div id="menuBar_Network" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openNetwork();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/network.png" />
    <br />
    <span>{% trans "Network" %}</span>
  </div>

  <div id="menuBar_Storage" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openStorage();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/storage.png" />
    <br />
    <span>{% trans "Storage" %}</span>
  </div>

  <div id="menuBar_DirectoryService" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openDirectoryService();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/directoryservice.png" />
    <br />
    <span>{% trans "Directory" %}</span>
    <!-- span>{% trans "Directory Service" %}</span -->
  </div>

  <div id="menuBar_Sharing" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openSharing();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/sharing.png" />
    <br />
    <span>{% trans "Sharing" %}</span>
  </div>

  <div id="menuBar_Services" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openServices();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/services.png" />
    <br />
    <span>{% trans "Services" %}</span>
  </div>

  {% for menu in menu_hook %}
  <div id="{% if menu.id %}{{ menu.id }}{% else %}menuBar_{{ forloop.counter }}{% endif %}" data-dojo-type="dijit.MenuBarItem" onClick="{{ menu.onclick }}" class="menu_icon{% if menu.align %} {{ menu.align }}{% endif %}"{% if menu.style %} style="{{ menu.style }}"{% endif %}>
    {% if menu.img %}
      {{ menu.img|safe }}
    {% else %}
      {% if menu.icon %}
      <img src="{{ STATIC_URL }}{{ menu.icon }}" />
      <br />
      {% endif %}
    {% endif %}
    <span>{{ menu.name|safe }}</span>
  </div>
  {% endfor %}

  <div id="menuBar_Alert" data-dojo-type="dijit.MenuBarItem" class="menu_icon right" onClick="alert_open();">
    <div data-dojo-type="dijit.layout.ContentPane" id="alert_status" class="alert_ok"></div>
    <span id="menuBar_AlertText">{% trans "Alert" %}</span>
  </div>

  <div id="menuBar_Documentation" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openDocumentation();" class="menu_icon right">
    <img src="{{ STATIC_URL }}images/ui/menu/{{ sw_name|lower }}guide.png" />
    <br />
    <span>{% trans "Guide" %}</span>
  </div>

  <div id="menuBar_Support" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openSystem('system.Support');" class="menu_icon right">
    <img src="{{ STATIC_URL }}images/ui/menu/support.png" />
    <br />
    <span>{% trans "Support" %}</span>
  </div>

  {% else %}
  <div id="menuBar_Login" data-dojo-type="dijit.MenuBarItem" onClick="window.location='/account/login/'" class="menu_icon" style="font-weight:bold;">
    <img src="{{ STATIC_URL }}images/ui/menu/login.png" />
    <br />
    <span>{% trans "Log In" %}</span>
  </div>
  {% endif %}
</div>
